<template>
  <div class="add">
    <div>
      <!-- 新增考勤组 -->
      <div>
        <el-page-header @back="back" title="新增考勤组"> </el-page-header>
      </div>
      <div>
        <!-- 考勤组名称 -->
        <div style="padding-bottom: 15px">
          <span
            style="display: block width: 70px;
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            height: 30px;
            color: #13213B;"
            >考勤组名称</span
          >
          <el-input
            type="text"
            placeholder="请输入考勤组名称"
            v-model="text"
            maxlength="15"
            show-word-limit
            class="Att"
          />
        </div>
        <!-- 考勤组人员设置 -->
        <div class="add-item">
          <span>考勤组人员</span>
          <span class="setting" @click="set()">设置</span>
          <p>参与考勤人员：未设置</p>
        </div>
        <!-- 考勤时间设置 -->
        <div class="add-item">
          <span>考勤时间</span>
          <span class="setting" @click="time = true">设置</span>
          <p>考勤类型：固定班至(固定时间打卡)</p>
          <p>工作日设置：周一 周二 周三 周四 周五</p>
        </div>
        <!-- 打卡范围设置 -->
        <div class="add-item">
          <span>打卡范围</span>
          <span class="setting" @click="punch = true">设置</span>
          <p>考勤方式：地点打卡</p>
          <p>打卡地点：廊坊市第三小学</p>
        </div>
        <button class="setting-set">保存设置</button>
      </div>

      <div class="Attendanceplace">
        <!--  右侧抽屉-->
        <div style="text-align: left; padding: 0 20px 0 20px">
          <!-- 考勤人员 -->
          <el-drawer
            title="考勤人员"
            :visible.sync="people"
            :direction="direction"
            :before-close="handleClose"
            show-close
          >
            <div
              style="
                width: 600px;
                height: 0px;
                opacity: 1;
                border: 1px solid #c4c4cf;
                margin-bottom: 20px;
              "
            ></div>
            <p>参与考勤人员({{ arr.length }})</p>
            <el-select
              style="width: 100%"
              v-model="value"
              @focus="selectPeople"
              clearable
              placeholder="未设置"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <div v-for="(item, index) in arr" :key="index">
              {{ item.label }}
            </div>
            <div class="bottom">
              <p>
                <button class="cancel" @click="people = false">取消</button>
                <button class="confifrm" @click="people = false">确定</button>
              </p>
            </div>
          </el-drawer>
          <!-- 考勤时间 -->
          <el-drawer
            title="考勤时间"
            :visible.sync="time"
            :direction="direction"
            :before-close="handleClose"
            show-close
            class="center"
          >
            <div
              style="
                width: 600px;
                height: 0px;
                opacity: 1;
                border: 1px solid #c4c4cf;
                margin-bottom: 20px;
              "
            ></div>
            <div>
              <p>工作日设置</p>
              <p>
                <span style="font-size: 12px">快捷设置班次：{{ shift }}</span>
                <el-button
                  @click="changeTimeClick(scope.row)"
                  type="text"
                  size="small"
                  style="
                    font-size: 14px;
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #126bff;
                    position: relative;
                    left: 93px;
                  "
                  >更改班次</el-button
                >
              </p>
              <div>
                <el-table
                  :data="tableData"
                  @selection-change="handleSelectionChange"
                  style="
                    width: 100%;
                    border: 1px #d7dbe3 solid;
                    border-radius: 8px;
                  "
                  :header-cell-style="{ background: '#D7DBE3' }"
                  header-row-class-name="tableHeaderRowClassName"
                >
                  <el-table-column type="selection"> </el-table-column>
                  <el-table-column
                    style="text-align: center"
                    prop="workDay"
                    label="工作日"
                    width="100"
                  >
                  </el-table-column>
                  <el-table-column
                    style="text-align: center"
                    prop="shiftTime"
                    label="班次时间段"
                    width="250"
                  >
                  </el-table-column>
                  <el-table-column
                    style="text-align: center"
                    label="操作"
                    width="100"
                  >
                    <template slot-scope="scope">
                      <el-button
                        @click="changeTimeClick(scope.row)"
                        type="text"
                        size="small"
                        style="
                          font-size: 14px;
                          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                          font-weight: 400;
                          color: #126bff;
                        "
                        >更改班次</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <p style="margin-top: 10px">
                  <el-checkbox v-model="checked"
                    >法定节假日自动排休</el-checkbox
                  >
                </p>
              </div>
            </div>
            <div class="bottom">
              <p>
                <button class="cancel" @click="time = false">取消</button>
                <button class="confifrm" @click="time = false">确定</button>
              </p>
            </div>
          </el-drawer>
          <!-- 打卡范围 -->
          <el-drawer
            title="打卡范围"
            :visible.sync="punch"
            :direction="direction"
            :before-close="handleClose"
            show-close
          >
            <div
              style="
                width: 600px;
                height: 0px;
                opacity: 1;
                border: 1px solid #c4c4cf;
                margin-bottom: 20px;
              "
            ></div>
            <!-- 打卡范围主体 -->
            <div>
              <div class="Attendanceplace-public">
                <p>考勤方式</p>
                <p>地点打卡</p>
              </div>
              <div class="Attendanceplace-public">
                <p>地点</p>
                <p>
                  <button
                    style="
                      width: 60px;
                      height: 32px;
                      background: #ffffff;
                      border-radius: 6px 6px 6px 6px;
                      opacity: 1;
                      border: 1px solid #126bff;
                      color: #126bff;
                    "
                    @click="addAddress"
                  >
                    添加
                  </button>
                  <span>可添加多个打卡地点</span>
                </p>
              </div>
            </div>
            <div class="bottom">
              <p>
                <button class="cancel" @click="punch = false">取消</button>
                <button class="confifrm" @click="punch = false">确定</button>
              </p>
            </div>
          </el-drawer>
        </div>
        <!-- 二级弹窗 -->
        <div>
          <!-- 设置考勤人员 -->
          <el-dialog
            title="选择参与人员"
            filter-placeholder="请输入志愿者姓名"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
          >
            <div style="text-align: center">
              <el-transfer
                style="text-align: left; display: inline-block"
                v-model="value4"
                filterable
                :titles="['全选', '已选']"
                :format="{
                  noChecked: '${total}',
                  hasChecked: '${checked}/${total}',
                }"
                @change="handleChange"
                @left-check-change="singCheck"
                @right-check-change="singCheck"
                :data="data"
              >
                <!-- <span slot-scope="{ option }"> {{ option.label }}</span> -->
                <div slot-scope="{ option }" style="margin-bottom: 10px">
                  <el-avatar
                    :size="30"
                    src="http://120.211.58.75:50003/storage/image/20230520/dc01991dd18b007597f953770b989127.png"
                    style="vertical-align: middle"
                  ></el-avatar>
                  <span> {{ option.label }}</span>
                </div>
                <!-- <div slot-scope="{ option }" style="margin-bottom: 10px">
                  <el-avatar
                    :size="30"
                    :src="option.url"
                    style="vertical-align: middle"
                  ></el-avatar>
                  <span> {{ option.label }}</span>
                </div> -->
              </el-transfer>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false" class="cancel"
                >取消</el-button
              >
              <el-button type="primary" @click="success" class="confifrm"
                >确定</el-button
              >
            </span>
          </el-dialog>
          <!-- 设置班次时间 -->
          <el-dialog
            title="选择班次"
            :visible.sync="timeVisible"
            width="30%"
            :before-close="handleClose"
          >
            <div class="selectTime">
              <p>
                <el-input
                  placeholder="请输入班次名称"
                  v-model="inputShift"
                  style="
                    width: 270px;
                    height: 34px;
                    border-radius: 8px 8px 8px 8px;
                    opacity: 1;
                    border: 1px solid #d7dbe3;
                    float: left;
                    margin: 10px 0 10px 0;
                  "
                >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </p>
              <div>
                <!--                   @selection-change="handleSelectionTimeData" -->
                <!--                   @select="handleSelectionTimeData" -->
                <el-table
                  :data="timeData"
                  style="
                    width: 100%;
                    border: 1px #d7dbe3 solid;
                    border-radius: 8px;
                  "
                >
                  <el-table-column width="50">
                    <template slot-scope="scope">
                      <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
                      <el-radio
                        class="radio"
                        v-model="templateSelection"
                        :label="scope.row"
                        @input="handleSelectionTimeData(scope.row)"
                        >&nbsp;</el-radio
                      >
                    </template>
                  </el-table-column>
                  <el-table-column
                    style="text-align: center; color: red"
                    prop="name"
                    label="班次名称"
                    width="100"
                    id="banji"
                  >
                  </el-table-column>
                  <el-table-column
                    style="text-align: center"
                    prop="shiftTime"
                    label="考勤时间"
                  >
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="timeVisible = false" class="cancel"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="timeVisible = false"
                class="confifrm"
                >确 定</el-button
              >
            </span>
          </el-dialog>
          <!-- 添加打卡地点 -->
          <el-dialog
            title="添加考勤地点"
            :visible.sync="dialogAddressVisible"
            width="auto"
            :before-close="handleClose"
          >
            <div>
              <MapContainer />
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false" class="cancel"
                >取消</el-button
              >
              <el-button type="primary" @click="success" class="confifrm"
                >确定</el-button
              >
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MapContainer from "@/components/Map/index";
export default {
  name: "APP",
  components: { MapContainer },
  data() {
    return {
      people: false,
      time: false,
      punch: false,
      dialogVisible: false,
      timeVisible: false,
      checked: false,
      dialogAddressVisible: false,
      direction: "rtl",
      text: "",
      options: [],
      value: "",
      // 穿梭框
      data: [
        {
          key: 1,
          url: "@/assets/pagesImg/first.png",
          label: "瑞特",
        },
        {
          key: 2,
          url: "@/assets/pagesImg/first.png",

          label: "改",
        },
        {
          key: 3,
          url: "@/assets/pagesImg/first.png",

          label: "从v下",
        },
        {
          key: 4,
          url: "@/assets/pagesImg/first.png",
          label: "规划局",
        },
        {
          key: 5,
          url: "@/assets/pagesImg/first.png",

          label: "士大夫",
        },
        {
          key: 6,
          url: "@/assets/pagesImg/first.png",

          label: "的方式",
        },
      ],
      // value: [1],
      value4: [],
      arr: [],
      gloub: [],
      renderFunc(h, option) {
        return (
          <span>
            {option.key} - {option.label}
          </span>
        );
      },
      shift: "快捷设置班次：班次 测试班次2：09:00-18:00", // 班次
      tableData: [
        {
          workDay: "周一",
          shiftTime: "班次 测试班次: 09:00-18:00",
        },
        {
          workDay: "周二",
          shiftTime: "班次 测试班次: 09:00-18:00",
        },
        {
          workDay: "周三",
          shiftTime: "班次 测试班次1: 09:00-18:00",
        },
        {
          workDay: "周四",
          shiftTime: "班次 测试班次1: 09:00-18:00",
        },
        {
          workDay: "周五",
          shiftTime: "班次 测试班次: 09:00-18:00",
        },
        {
          workDay: "周六",
          shiftTime: "班次 默认: 09:00-18:00",
        },
        {
          workDay: "周日",
          shiftTime: "班次 测试班次2: 09:00-18:00",
        },
      ],
      inputShift: "", // 更改班次搜索班次名称
      timeData: [
        {
          id: 1,
          name: "测试班次",
          shiftTime: "09:00-18:00",
        },
        {
          id: 2,
          name: "测试班次1",
          shiftTime: "09:00-18:00",
        },
        {
          id: 3,
          name: "默认",
          shiftTime: "09:00-18:00",
        },
      ],
      templateSelection: "", // 班次考勤时间选择
      checkList: [], // 当前选择的行的数据
    };
  },
  methods: {
    // 返回上一级
    back() {
      this.$router.go(-1);
    },
    // 关闭弹窗
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    // 调出抽屉
    set() {
      this.people = true;
    },
    selectPeople() {
      this.dialogVisible = true;
      console.log("222");
    },
    findItem(arr, key, val) {
      // console.log(arr, key, val);
      for (let i = 0; i < arr.length; i++) {
        if (arr[i][key] == val) {
          // console.log(arr[i]);
          return arr[i];
        }
      }
      return -1;
    },

    handleChange(e, lr) {
      // 当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组
      console.log(e); // 只需要判断这个key 将这个key 相关的值拿到 0 1 2 3
      console.log(lr);
      let that = this;
      e.forEach((item) => {
        // console.log(that.findItem(that.data, "key", item));
        this.gloub.push(that.findItem(that.data, "key", item));
      });
      console.log(this.gloub);
      this.arr = this.gloub;
      this.gloub = [];
    },
    success() {
      this.dialogVisible = false;
    },
    singCheck(k1) {
      //左边选中触发的事件
      console.log(k1);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 调起更改班次考勤时间弹窗
    handleSelectionChange(val) {
      console.log(val);
      // this.templateSelection = val;
      this.multipleSelection = val;
    },
    // 操作班次
    changeTimeClick(row) {
      console.log(row.shiftTime);
      this.timeVisible = true;
    },
    // 选择班次考勤时间
    handleSelectionTimeData(row) {
      this.templateSelection = row;
      console.log(this.templateSelection);
    },
    // 添加打卡地点
    addAddress() {
      this.dialogAddressVisible = true;
    },
    // tableHeaderRowClassName() {
    //   return "header-row-class";
    // },
  },
  created() {},
  mounted() {
    // this.tableHeaderRowClassName();
  },
};
</script>
<style lang="scss" scoped >
/deep/.tableHeaderRowClassName {
  background-color: red !important;
  color: #9a9aa4 !important; // 设置头部样式只有这里起了作用
  text-align: center !important;
  font-weight: 400;
}
/deep/.el-table__body-wrapper {
  // color: red !important;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #13213b !important;
}

/deep/.Att input {
  border: 1px #d7dbe3 solid !important;
  background-color: #ffffff !important;
  border-radius: 8px !important;
}
.add-item {
  padding: 5px;
}
.add-item > p {
  height: 16px;
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #9a9aa4;
}
.add-item > span:nth-of-type(1) {
  padding-right: 14px;
  height: 19px;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #13213b;
}

.add {
  height: 100%;
  width: 100%;
  background-color: #ffffff;
}
.add > div > div:nth-of-type(2) {
  text-align: left;
  padding: 15px;
  height: 100%;
  display: flex;
  width: 500px;
  // border: 1px red solid;
  flex-direction: column;
  align-items: start;
}
.add > div > div:nth-of-type(2) > div:nth-of-type(1) {
  // box-sizing: border-box;
  height: 80px;
  display: flex;
  line-height: 40px;
  flex-direction: column;
  padding: 5px;
}
.add > div > div:nth-of-type(2) > div:nth-of-type(1) .el-input {
  width: 400px;
}
.add > div > div:nth-of-type(2) > div {
  width: 100%;
  height: 80px;
  // border: 1px red solid;
}
.setting {
  width: 28px;
  height: 19px;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #126bff;
  line-height: 0px;
}
.setting-set {
  width: 100px;
  height: 36px;
  background: #126bff;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  font-size: 16px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  border: none;
}
/deep/.el-page-header {
  display: block;
  height: 40px !important;
  line-height: 40px !important;
  border: 1px #ffffff solid !important;
}
/deep/.el-drawer__header {
  text-align: left;
  // padding-bottom: 15px;
  // border-bottom: 1px #000000 solid;
  margin-bottom: 20px !important;
  color: #13213b;
  font-weight: 800;
}
.bottom {
  position: fixed;
  /* position: ABSOLUTE; */
  bottom: -7px;
  padding: 10px;
  // border: 1px red solid;
  overflow: auto;
  width: -webkit-fill-available;
}
.bottom p {
  // border: 1px red solid;
  float: right;
  position: relative;
}
.bottom button {
  margin: 10px;
}
.cancel {
  width: 78px;
  height: 40px;
  background: #eef5ff;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  color: #126bff;
  border: none;
}
.confifrm {
  width: 78px;
  height: 40px;
  background: #126bff;
  border-radius: 8px 8px 8px 8px;
  color: #ffffff;
  opacity: 1;
  border: none;
}
/deep/.el-dialog {
  width: 625px !important;
  border-radius: 20px;
}
/deep/.el-dialog__header {
  text-align: left;
  width: 119px;
  height: 21px;
  font-size: 16px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #13213b;
}
/deep/.el-transfer {
  display: flex !important;
  align-items: center;
}
/deep/.el-drawer__body {
  padding-left: 20px;
  padding-right: 20px !important;
}
/deep/.el-input--suffix .el-input__inner {
  background-color: #ffffff !important;
  color: #c4c4cf !important;
  border: 1px #d7dbe3 solid !important;
}
/deep/.el-select .el-input .el-select__caret {
  position: relative;
  top: 5px !important;
}
.center /deep/.el-drawer__open .el-drawer.rtl {
  width: 40% !important;
}
/deep/.tableHeaderClassName {
  background-color: red !important;
}
/deep/.el-table th.el-table__cell {
  text-align: center !important;
}
.el-table--enable-row-transition .el-table__body td.el-table__cell {
  text-align: center;
}
// .el-table td.el-table__cell,
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell .is-leaf {
  text-align: center !important;
  // border: 1px red solid;
}
/deep/.el-input--prefix .el-input__inner {
  background-color: white !important;
}
.selectTime > p:nth-of-type(1) i {
  // border: 1px red solid;
}
.Attendanceplace-public {
  border: 1px red solid;
  line-height: 30px;
  padding-left: 10px;
  padding-bottom: 15px;
}
</style>
